<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="6">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="createPrepare" icon="el-icon-edit">生成备料任务
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="changePrepare" icon="el-icon-edit">备料任务变更
          </el-button>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="订单号-回车查询"
                    v-model="search.condition.ownerOrderNo"
                    @keyup.enter.native="list"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="columnCheckList">
                  <el-checkbox label="noticeNo">通知单号</el-checkbox>
                  <el-checkbox label="houseName">仓库</el-checkbox>
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">订单号</el-checkbox>
                  <el-checkbox label="noticeHeadSourceKey">客户运单号</el-checkbox>
                  <el-checkbox label="prepareStatus">备料状态</el-checkbox>
                  <el-checkbox label="loadingArea">备料状态</el-checkbox>
                  <el-checkbox label="planTime">计划装车时间</el-checkbox>
                  <el-checkbox label="noticeHeadStatus">出库状态</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
      <!--更多内容-->
      <div :class="{'search-transition':moreSearchVisible,h0:true,hAuto:moreSearchVisible,'search-content':true}">
        <el-form ref="form" :model="search.condition" label-width="100px" :inline="true">
          <el-form-item label="订单号">
            <el-input placeholder="请输入订单号" class="w200" clearable v-model="search.condition.ownerOrderNo"></el-input>
          </el-form-item>
          <el-form-item label="车架号">
            <el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>
          </el-form-item>
          <el-form-item label="客户运单号">
            <el-input placeholder="请输入客户运单号" class="w200" clearable v-model="search.condition.headSourceNo"></el-input>
          </el-form-item>
          <el-form-item label="备料状态">
            <el-select v-model="search.condition.preparationStatus" placeholder="请选择备料状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="未备料" value="10"></el-option>
              <el-option label="开始执行" value="20"></el-option>
              <el-option label="部分备料" value="30"></el-option>
              <el-option label="全部完成" value="40"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--备料列表-->
    <el-table ref="prepareListTable" :data="preparationList" v-loading="listLoading" element-loading-text="加载中" border
              fit highlight-current-row
              style="width: 100%;margin-top:5px" @selection-change="handleSelectionChange"
              @row-click="getPreparationDetail">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareHeadStatusFilter}}</div>
          <div v-else-if="value.key === 'noticeHeadStatus'">{{scope.row[value.key] | noticeHeadStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="search.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="search.size" :total="search.total"
                     layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <div style="height: 30px"></div>

    <!--备料明细信息列表-->
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-checkbox-group v-model="infoColumnCheckList">
                <el-checkbox label="materielCode">车型名称</el-checkbox>
                <el-checkbox label="lotNo1">车架号</el-checkbox>
                <el-checkbox label="locationNo">库位</el-checkbox>
                <el-checkbox label="materielName">车型描述</el-checkbox>
                <el-checkbox label="ownerOrderNo">订单号</el-checkbox>
                <el-checkbox label="preparationStatus">任务状态</el-checkbox>
                <el-checkbox label="preparetor">备料司机</el-checkbox>
                <el-checkbox label="startTime">开始时间</el-checkbox>
                <el-checkbox label="finishTime">完成时间</el-checkbox>
                <el-checkbox label="lineStatus">出库状态</el-checkbox>
              </el-checkbox-group>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <!--明细表-->
    <el-table ref="prepareInfoTable" :data="prepareInfoList" v-loading="infoLoading" element-loading-text="加载中" border
              fit highlight-current-row
              style="width: 100%;margin-top:5px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" v-for='(value,key) in infoColumnList' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'preparationStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else-if="value.key === 'lineStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>

    <!--创建备料弹窗-->
    <el-dialog title="创建备料计划" :visible.sync="dialogVisible" width="50%" :before-close="handleDialogClose">

      <el-form ref="form" label-width="120px" :inline="true">
        <el-form-item label="装车道">
          <el-input placeholder="请填写装车道" class="w200" width="120px" v-model="inputParam.prepareLane"></el-input>
        </el-form-item>
        <el-form-item label="计划装车时间">
          <el-date-picker class="w200" v-model="inputParam.planTime" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCreatePrepare">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
  import * as outboundPrepareAPI from '@/api/outbound/outboundPrepare'
  import waves from '@/directive/waves' // 水波纹指令
  const defaultColumn = [
    { key: 'noticeNo', title: '通知单号', width: '' },
    { key: 'houseName', title: '仓库', width: '' },
    { key: 'ownerId', title: '客户', width: '' },
    { key: 'ownerOrderNo', title: '订单号', width: '' },
    { key: 'noticeHeadSourceKey', title: '客户运单号', width: '' },
    { key: 'prepareStatus', title: '备料状态', width: '' },
    { key: 'loadingArea', title: '备车道', width: '' },
    { key: 'planTime', title: '计划装车时间', width: '' },
    { key: 'noticeHeadStatus', title: '出库状态', width: '', fixed: 'right' }
  ]
  const defaultInfoColumn = [
    { key: 'materielCode', title: '车型名称', width: '' },
    { key: 'lotNo1', title: '车架号', width: 180 },
    { key: 'locationNo', title: '库位', width: '' },
    { key: 'materielName', title: '车型描述', width: 180 },
    { key: 'ownerOrderNo', title: '订单号', width: '' },
    { key: 'preparationStatus', title: '任务状态', width: '' },
    { key: 'preparetor', title: '备料司机', width: '' },
    { key: 'startTime', title: '开始时间', width: '' },
    { key: 'finishTime', title: '完成时间', width: '' },
    { key: 'lineStatus', title: '出库状态', width: '', fixed: 'right' }
  ]

  export default {
    directives: {
      waves
    },
    data() {
      return {
        search: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            lotNo1: null,
            noticeHeadNo: null,
            ownerOrderNo: null,
            preparationStatus: null,
            storeHouseId: null
          }
        },
        inputParam: {
          planTime: null,
          prepareLane: null,
          noticeHeadId: null
        },
        columnList: defaultColumn,
        columnCheckList: [
          'noticeNo',
          'houseName',
          'ownerId',
          'ownerOrderNo',
          'noticeHeadSourceKey',
          'prepareStatus',
          'loadingArea',
          'planTime',
          'noticeHeadStatus'
        ],
        infoColumnList: defaultInfoColumn,
        infoColumnCheckList: [
          'materielCode',
          'lotNo1',
          'locationNo',
          'materielName',
          'ownerOrderNo',
          'preparationStatus',
          'preparetor',
          'startTime',
          'finishTime',
          'lineStatus'
        ],
        moreSearchVisible: false,
        multipleSelection: [],
        preparationList: [],
        prepareInfoList: [],
        listLoading: false,
        infoLoading: false,
        tableData: [],
        tableHeader: [],
        dialogVisible: false,
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      }
    },
    created() {
      this.list()
    },
    watch: {
      columnCheckList(valArr) {
        this.columnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      },
      infoColumnCheckList(valArr) {
        this.infoColumnList = defaultInfoColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        const that = this
        // 更多
        const queryParam = {}
        if (this.moreSearchVisible) {
          queryParam.condition = that.search.condition
        } else {
          queryParam.condition = {
            ownerOrderNo: that.search.condition.ownerOrderNo
          }
        }
        // 分页
        queryParam.current = this.search.current
        queryParam.size = this.search.size
        queryParam.condition.storeHouseId = this.$store.getters.currentStorehouse.id
        this.listLoading = true
        outboundPrepareAPI.getPreparationList(queryParam).then(result => {
          if (result.code === 0) {
            this.preparationList = result.data.records
            this.search.total = result.data.total
            that.listLoading = false
          } else {
            that.listLoading = false
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      reset() {
        this.search.current = 1
        this.search.size = 10
        this.search.condition = {
          storeHouseId: this.$store.getters.currentStorehouse.id,
          lotNo1: null,
          noticeHeadNo: null,
          headSourceNo: null,
          preparationStatus: null
        }
        this.list()
      },
      getPreparationDetail(row, event, column) {
        const noticeHeadId = row.noticeHeadId
        this.infoLoading = true
        const queryParam = {}
        queryParam.noticeHeadId = noticeHeadId
        outboundPrepareAPI.getPreparationDetail(queryParam).then(result => {
          if (result.code === 0) {
            this.prepareInfoList = result.data
            this.infoLoading = false
          } else {
            this.infoLoading = false
            this.list()
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      createPrepare() {
        const that = this
        const selects = that.multipleSelection
        if (selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择要创建备料计划的数据',
            type: 'warning',
            duration: 2000
          })
        } else if (selects.length > 1) {
          this.$message({
            title: '错误提示',
            message: '只能选择一行数据',
            type: 'warning',
            duration: 2000
          })
        } else {
          that.dialogVisible = true
        }
      },
      confirmCreatePrepare() {
        const that = this
        const selects = that.multipleSelection
        if (selects.length === 1 && that.inputParam.planTime && that.inputParam.prepareLane) {
          that.inputParam.noticeHeadId = selects[0].noticeHeadId
          outboundPrepareAPI.createPreparation(that.inputParam).then(result => {
            if (result.code === 0) {
              this.listLoading = false
              this.handleDialogClose()
              this.list()
            }
          })
        } else {
          this.$message({
            title: '错误提示',
            message: '请填写装车道或计划装车时间',
            type: 'warning',
            duration: 2000
          })
        }
      },
      changePrepare() {
        // 注释
        const selects = this.multipleSelection
        if (selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择要创建备料计划的数据',
            type: 'warning',
            duration: 2000
          })
        } else if (selects.length > 1) {
          this.$message({
            title: '错误提示',
            message: '只能选择一行数据',
            type: 'warning',
            duration: 2000
          })
        } else {
          const inputParams = {}
          inputParams.noticeHeadId = selects[0].noticeHeadId
          inputParams.storeHouseId = this.$store.getters.currentStorehouse.id
          outboundPrepareAPI.changePreparation(inputParams).then(result => {
            if (result.code === 0) {
              this.$message({
                title: '错误提示',
                message: result.message,
                type: 'info',
                duration: 2000
              })
              this.list()
            }
          })
        }
      },
      moreClick() {
        this.moreSearchVisible = !this.moreSearchVisible
      },
      selected(data) {
        this.tableData = data.results
        this.tableHeader = data.header
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        // 分页size变化
        this.search.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.search.current = val
        this.list()
      },
      handleDialogClose() {
        // 关闭
        this.inputParam.noticeHeadId = null
        this.inputParam.planTime = null
        this.inputParam.prepareLane = null
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped>

</style>
